<template>
     <div class="search">
        <input 
        type="text" 
        placeholder="全站搜索博客" 
        @focus="contentShow = true"
        @blur="hidden"
        v-model.trim="content">

        <div class="img">
            <img src="@/assets/搜索.png" alt="" @click="sendSearch">
        </div>
        <div class="content" v-show="contentShow">
            <div class="history" v-show="!changContent">
                <p v-for="(item,index) in searchHistory" :key="index" @click="searchHister(item)">{{item}}</p>
                
            </div>
            <div class="searchcontent" v-show="changContent">
                <p 
                    v-for="item in searchDate" 
                    :key="item._id"
                    @click="goSearchResult(item)">
                    {{item.name ? item.name : '无数据'}}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name:"Search-Component",
        data(){
            return {
                contentShow:false,
                content:"",
                changContent:false,
                searchHistory: JSON.parse(localStorage.getItem('searchHistroy')) || []
            }
        },

        methods: {
            // 防抖发送请求
            handChangeContent(val){
                if(val === ''){
                    this.changContent = false
                    return false
                }
                // 延迟，此处发请求
                this.changContent = !this.changContent
                this.$store.dispatch('Home/search',val)
            },

            // 隐藏文本内容
            hidden(){
                setTimeout(()=>{this.contentShow = false},300)
            },
            // 前往搜索结果详情页
            goSearchResult(item){
                // 获取作者信息
                this.$store.dispatch('Home/getArouth',item.arouth)
                // 添加浏览量
                this.$store.dispatch('Home/addLook',item._id)
                setTimeout(()=>{
                    this.$set(item,'arouthName',this.arouthInfo)
                    this.$router.push({
                        path:"/blogDetails",
                        query:item
                    })
                },50)
            },

            // 跳转方法
            getSearchResult(content){
                // 传递搜索内容后跳转
                setTimeout(() => {
                    this.$router.push({
                        path:'/searchResult',
                        query:{searchContent:content}
                    })
                }, 20);
            },

            // 点击搜索按钮
            sendSearch(){
                // 保存搜索历史到本地
                if(this.content === '') return 

                this.searchHistory.push(this.content)
                // 去重再保存
                this.searchHistory = Array.from(new Set(this.searchHistory))
                localStorage.setItem('searchHistroy',JSON.stringify(this.searchHistory))

                // 搜索结果跳转
                this.getSearchResult(this.content)
            },

            // 历史记录搜索
            searchHister(item){
                if(this.$route.path === '/searchResult'){
                    this.getSearchResult(item)
                    setTimeout(()=>{
                        this.$router.go(0)
                    },20)
                }else{
                    this.getSearchResult(item)
                }
            }


        },
        watch:{
            content(val){
                clearTimeout(this.timeOut)
                this.timeOut = setTimeout(()=>{
                    this.handChangeContent(val)
                },500)
            }
        },
        computed:{
            ...mapState('Home',['searchDate','arouthInfo'])
        },
       
    }
</script>

<style lang="less" scoped>
    .search{
            width: 26vw;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            input{
                width: 100%;
                padding: left;
                height: 4vh;
                // border-radius: 0.8vw;
                outline: none;
                padding-left: 0.7vw;
                border: none;
                transition: 0.5s;

                &:focus{
                    font-size:1vw;
                    box-shadow: 0 0 5px 5px rgba(204, 204, 204, 0.199);
                }
            }

            .img{
                position: absolute;
                right: 0;
                height: 2vw;
                background: rgb(229, 209, 209);
                width: 2vw;
                text-align: center;
                cursor: pointer;
            
                img{
                    width: 1.6vw;
                    height: 1.6vw;

                }
            }

            .content{
                width: 100%;
                height: 18vw;
                overflow: auto;
                background: rgb(240, 239, 239);
                position: absolute;
                top: 7vh;
                z-index:1000;
                
                p{
                    color: rgb(71, 71, 71);
                    font-size: 1vw;
                    // margin-top:1.1vw;
                    padding-left:0.5vw;
                    height: 2.6vw;
                    line-height: 2.6vw;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap; 

                    &:hover{
                        background: #ccc;

                    }
                }

            }
        }
</style>